import React from 'react'
import ReactDOM from 'react-dom'     
// import ReactEcharts from 'echarts-for-react'
// import echarts from 'echarts';
// import echarts from 'echarts/lib/echarts' //必须
// import 'echarts/lib/component/tooltip'
// import 'echarts/lib/chart/bar'

import './css/MainShow.css' 
//  import '../../../node_modules/echarts/map/js/province/guangdong';

class MainShow extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  
        };
    } 
    info = {
      days : 365,
      today : new Date(),
      msDay : 1000 * 60 * 60 * 24,//一天几毫秒
      whichDay:1,//今天是第几天
      szInfo:[],//深圳信息
      szMap:{},//深圳地图
      szInfoStr:"",
      szInfoZn:{},//中文解释
      danPlay:{
        hour:3,//工作日一天的业余时间
        weekend:8,//周末一天的业余时间

      }

    }

    componentWillMount = () => { 
      this.info.whichDay = this.getCurDay();
      this.getSzInfo("szInfo");
      
     } 
    componentDidMount = () => {
     
    }   
    resume = ()=>{  }  

    proData = (type) =>{
      switch(type){
        case "curDay":
            for(let i=1; i<this.info.days;i++){
              if(this.info.whichDay == i)
              return <div className='curDay' style={{width:i+"px"}}>
                {i}天
              </div>
            }
        break;
        case "szInfo":
           this.szInfoStr = this.info.szInfo.map((item,i) => {
             let titlestr =  <div className = "title">  {item.name_desc} </div>;
             switch(item.name){
               case "food":
                  return(<div className={item.name +" wrap"}>
                    {titlestr}
                    <div className = 'content'>
                      {
                        item.data.map((ktem,k) => {
                          return(<div>
                            {ktem.addr}
                          </div>)
                        })
                      }
                    </div> 
                  </div>)
               break;
               default:
                   return(<div className={item.name +" wrap"}>
                    {titlestr}
                    <div className = 'content'>
                      {
                        item.data.map((ktem,k) => {
                          return(<div>
                            {ktem.addr} 
                            <p style={{"text-indent": "30px"}}> 
                              {ktem["motorCar"]?this.info.szInfoZn['motorCar']+"：":""}{ktem["motorCar"]} 
                            </p>
                            <p style={{"text-indent": "30px"}}>
                              {ktem["recommendation"]?this.info.szInfoZn['recommendation']+"：":""}{ktem["recommendation"]}
                            </p>
                            <p style={{"text-indent": "30px"}}>
                              {
                                ktem.scenicSpot? this.info.szInfoZn['scenicSpot']+"：":""
                              } 
                              {
                                ktem.scenicSpot?ktem.scenicSpot.map((ztem,z) =>{
                                  return(<div>
                                    {ztem.name}
                                    <p style={{"text-indent": "60px"}}>
                                      {ztem["entranceTicket"]?this.info.szInfoZn['entranceTicket']+"：":""}
                                      {ztem["entranceTicket"]} 
                                    </p> 
                                  </div>)
                                }):""
                              }
                            </p>

                            
                          </div>)
                        })
                      }
                    </div> 
                  </div>)
               
               break;
               
             }
          
           })
            this.setState()
        break;
      }
    
    }
    getCurDay = () =>{
      let firstDay = new Date(this.info.today.getFullYear(),0,1); 
      let dateDiff = this.info.today - firstDay;  
      let diffDays = Math.ceil(dateDiff/ this.info.msDay); 
      return diffDays
    }
    getSzInfo = (url) => {
      T.ajax({
        key:url,
        f:'json',
        success: (result) =>{
          this.info.szInfo = result.data;
          this.info.szInfoZn = result.shame;
           this.proData("szInfo")   
        }
      })
    }
    render() {
       
      const { width="100%", height="200px"} = this.props
        return (
            <div  className="MainShow">
              <div className = "firstShow">
                <div>
                  <div className = 'showTime'>
                    <p>今年进行时，你还在玩闹吗？</p>
                      <div className = 'progress'>
                        {   this.proData("curDay") }
                      </div>
                  </div>
                </div>
                
                <div> 
                  <a href="https://baike.baidu.com/item/%E4%B8%80%E4%B8%87%E5%B0%8F%E6%97%B6%E5%AE%9A%E5%BE%8B/8255848?fr=aladdin">一万小时定律</a>
                  <p>一万小时定律是作家格拉德威尔在《异类》一书中指出的定律。“人们眼中的天才之所以卓越非凡，并非天资超人一等，而是付出了持续不断的努力。1万小时的锤炼是任何人从平凡变成世界级大师的必要条件。”他将此称为“一万小时定律”。</p>
                  <a href="http://www.ruanyifeng.com/blog/2011/04/the_dan_plan.html">Dan计划：重新定义人生的10000个小时</a> 
                  <p>假如一天{this.info.danPlay.hour}小时，一周就是 {this.info.danPlay.hour*5+this.info.danPlay.weekend*2}小时(周末按{this.info.danPlay.weekend}小时/天)；一年有{(365/7).toFixed(3)}周</p>
                  <p> 那么这个计划大概就要{ (10000/(this.info.danPlay.hour*5+this.info.danPlay.weekend*2)).toFixed(3)}周</p>
                  <p>换句话说，业余时间里，如果你按上面的时间来安排，你6年就可以成为某个专业的专家</p>
                 
                </div>
                <div>
                  <p>我的B计划是什么？</p>
                  
                </div>
                <div>
                  <a href="http://www.ruanyifeng.com/blog/2016/05/group-chat.html">要聊天，先付费</a>
                  <p>聊天收费-->大家时间都是宝贵的---->专注在自己的事情上面，避免过多的时间被浪费</p>                  
                  
                </div>

              </div>

              <div className="section">
                <p>深圳信息</p>
                <span>深圳行政区划代码：440300</span>
                {/*<div ref={ID => this.ID = ID} style={{width, height}}></div>*/}
                {/*<ReactEcharts   ref = { (e) => {this.echarts_sz = e}}  option={option}      />  */}
                <div className = "mainContent"> 
                    { this.szInfoStr} 
                </div>
              </div>
              
            </div>
        )
    }
} 
export default MainShow 